<template>
  <!-- 公共组件样式抽取 -->
  <div class="common-card">
    <div style="display: flex; justify-content: space-between; margin: 7px 0">
      <div class="title" style="font-size: 40px; color: #000">
        {{ title }} :
        <span v-if="title == '好评数'" style="color: gold">{{ value }}</span>
        <span v-if="title == '差评数'" style="color: red">{{ value }}</span>
        <span v-if="title == '中评数'">{{ value }}</span>
      </div>
      <!-- <el-tooltip :content="content" effect="dark" placement="bottom">
                <svg-icon size="small" icon-class="question" />
            </el-tooltip> -->
    </div>

    <!-- <div class="value">{{ value }}</div> -->

    <div class="total">
      <!-- 插槽2-->
      <slot name="footer"></slot>
    </div>
    <div class="line" />
    <div class="chart">
      <!-- 插槽1-->
      <slot></slot>
    </div>
  </div>
</template>
  
<script>
export default {
  props: {
    title: String,
    value: Number,
    content: String,
  },
};
</script>
  
<style scoped>
.title {
  font-size: 16px;
  color: #999;
}

.value {
  font-size: 25px;
  color: #000;
  margin-top: 5px;
  letter-spacing: 1px;
}

.chart {
  height: 30px;
  /* font-size: 16px; */
}

.common-card {
  padding: 10px 10px;
  border: 1px solid #eee;
}

.line {
  margin: 10px 0;
  border-top: 1px solid #eee;
}

.total {
  font-size: 16px;
  color: #666;
}
</style>
  
<style lang="scss">
//强调样式
.emphasis {
  margin-left: 5px;
  color: #333;
  font-weight: 700;
}

//上三角
.increase {
  width: 0;
  height: 0;
  border-width: 3px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  margin: 0 0 3px 5px;
}

//下三角
.decrease {
  width: 0;
  height: 0;
  border-width: 3px;
  border-color: green transparent transparent transparent;
  border-style: solid;
  margin: 3px 0 0 5px;
}
</style>
  
  